import React, { useState } from 'react'
import { Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { createStyles } from 'antd-style';
import type { DataType } from '../utils/TS'
// 定义表格行的选择类型
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

const useStyle = createStyles(({ css, token }) => {
  const { antCls } = token;
  return {
    customTable: css`
      ${antCls}-table {
        ${antCls}-table-container {
          ${antCls}-table-body,
          ${antCls}-table-content {
            scrollbar-width: thin;
            scrollbar-color: #eaeaea transparent;
            scrollbar-gutter: stable;
          }
        }
      }
    `,
  };
});
interface TablesProps {
  columns: TableColumnsType<DataType>;
  dataSource: DataType[];
}
export default function Tables({columns,dataSource}: TablesProps) {

  const { styles } = useStyle();

  // 定义选中的行键
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // 选中行键改变时触发
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // 定义表格行的选择
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <Table<DataType>
      rowSelection={rowSelection}
      className={styles.customTable}
      pagination={false}
      columns={columns}
      dataSource={dataSource}
      scroll={{ x: 'max-content' }}
    />
  )
}
